<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <form action="" method="post" enctype="multipart/form-data">
			
			<input type="submit" value=""/>
		</form> -->
		姓名：<input class="username" /><br>
		图像：<input type="file" class="img"  /><br>
		<button>点击发送ajax传送文件</button>
		<script type="text/javascript">
		// 1.需要借助 formData对象  2.不需要设置头部；
			let userEle = document.querySelector(".username");
			let imgEle = document.querySelector(".img");
			let btn = document.querySelector("button");
			btn.onclick = function(){
				// 获取姓名 
				let username = userEle.value;    
				let imgFlile = imgEle.files[0];  //获取图片文件对象；
				// console.log(username,imgFlile)
				
				// 通过一个form data对象 来存储 数据和文件；
				let form = new FormData();
				// 把数据和文件加入到form
				form.append("username",username);
				form.append("img",imgFlile);
				let xhr = new XMLHttpRequest();
				xhr.open("POST","file.php");
				xhr.onload = function(){
					console.log(xhr.responseText);
				}
				// name=fdsa&age=fdaf
				xhr.send(form);
			}
			
			
			
			
			
		</script>
	</body>
	
</html>
